<template>
  <div>
    <div style="display: flex;">
      <div style="box-shadow: 0 5px 12px 0 rgba(0,0,0,.4);border-radius: 5px;width: 157px;padding: 5px;" class="panel">
        <div v-for="i1 in 4" :key="i1" style="display: flex;flex-direction: row">
          <div v-for="i2 in 3" :key="i2">
            <div
              style="background:#5a5e66;border-radius: 5px;height: 45px;margin: 2px;width: 45px"
              :class="{'infinite':batteryCharging}"
            />
          </div>
        </div>
      </div>
      <div style="margin-left: 13px">
        <div class="info-item">
          <span class="title">{{ $t('panelPower') }}:</span>
          <span class="value">{{ panelPower }}W</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('panelDayPowerCount') }}:</span>
          <span class="value">{{ parseInt(panelDayPowerCount) }} Wh</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('panelPowerCount') }}:</span>
          <span class="value">{{ parseInt(panelPowerCount) }} Wh</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('chargingVoltage') }}:</span>
          <span class="value">{{ chargingVoltage / 1000 }} V</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 15px;display: flex">
      <div>
        <div
          style="box-shadow: 0 5px 12px 0 rgba(0,0,0,.4);border-radius: 5px;width: 157px;padding: 5px;height:90px;width: 160px;position: relative;"
        >
          <div style="position: absolute;top: -13px;right: 13px;background: #FF805F;color: white;padding: 2px 5px">
            <span v-if="mpptVersion">{{ mpptVersion }}</span>
            <span v-else="">MPPT</span>
          </div>
          <div style="font-weight: 700;color: #34bfa3;font-size: 24px;margin-top: 13px;margin-left: 5px">{{ pcbTemplate }}℃</div>
          <dv-decoration-6 style="height: 30px;" />
        </div>
      </div>
      <div style="margin-left: 13px">
        <div class="info-item">
          <span class="title">{{ $t('hardware')+$t('version') }}:</span>
          <span class="value">{{ hardVersion }}</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('software')+$t('version') }}:</span>
          <span class="value">{{ softVersion }}</span>
        </div>
        <div :class="['info-item',{'timeEnable':timerPrimary},{'timeDisable':!timerPrimary}]">
          <span> <span class="el-icon-time" /> {{ $t('mainPowerSupply') }}</span>
        </div>
        <div :class="['info-item',{'timeEnable':timer485},{'timeDisable':!timer485}]">
          <span> <span class="el-icon-time" /> {{ $t('auxiliaryPowerSupply') }}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { listDeviceSetting } from '@/api/iot/iotDeviceSettingApi'

export default {
  name: 'SolarPanel',
  props: {
    batteryCharging: {
      type: Boolean,
      default: false
    },
    panelDayPowerCount: {
      type: String,
      default: '_'
    },
    panelPowerCount: {
      type: String,
      default: '_'
    },
    chargingVoltage: {
      type: String,
      default: '_'
    },
    pcbTemplate: {
      type: String,
      default: '_'
    },
    mpptVersion: {
      type: String,
      default: null
    },
    hardVersion: {
      type: String,
      default: '_'
    },
    softVersion: {
      type: String,
      default: '_'
    },
    panelPower: {
      type: String,
      default: '_'
    },
    deviceCore: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      settingList: [],
      timer485: false,
      timerPrimary: false
    }
  },
  watch: {
    deviceCore: {
      deep: true,
      handler(val) {
        if (val != null) {
          this.listDeviceSetting()
        }
      }
    }
  },
  created() {
    this.listDeviceSetting()
  },
  methods: {
    listDeviceSetting() {
      if (this.deviceCore == null) {
        return
      }
      const that = this
      listDeviceSetting({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          for (const item of data) {
            if (item.setting === 'setPower1Key') {
              if (item.val === '2') {
                that.timerPrimary = true
              }
            } else if (item.setting === 'setPower2Key') {
              if (item.val === '2') {
                that.timer485 = true
              }
            }
          }
        }
      })
    }

  }
}
</script>

<style scoped>

  .timeEnable {
    color: #34bfa3;
  }

  .timeDisable {
    color: #e6ebf5
  }

  .panel {

  }

  i {
    font-size: 25px;
  }

  .info-item {
    margin-top: 13px;
    font-size: 7px;
  }

  .title {
    color: #909399;
  }

  .value {
    color: #34bfa3;
  }

  .working {
    animation: working-animation 1s infinite;
  }

  @keyframes working-animation {
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
